import React, { Component } from 'react';
import { category_list } from "../../utils/api";
import EventEmitter from '../../utils/emit'

class TabLeft extends Component {

    //定义组件状态
    state = {
        currentIndex: 0,
        lefttab: [],
    }
    
    handleClick(index) {
        EventEmitter.emit('saveIndex',this.state.lefttab[index].id)
        this.setState({
            currentIndex: index
        });
    }
    componentDidMount(){
        category_list().then((res)=>{
            this.setState({
                lefttab: res.data.list
            },()=>{
                this.handleClick(0)
            });
        })
    }

    render() {
        return (
            <div className='tableft'>
                {
                    this.state.lefttab.map((item, index) => {
                        return (
                            <div className={'btn ' + (this.state.currentIndex === index ? 'active' : '')} onClick={() => { this.handleClick(index) }}
                                key={index}>
                                <div className='text '>{item.name}</div>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default TabLeft;